<!--
 * @Description: 经销商添加
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-12 09:49:19
 * @FilePath: /yuxiuproweb/src/views/app/activity/mods/customer.vue
-->

<template>
  <div>
    <el-drawer
      :visible.sync="shows"
      :title="'授权经销商'"
      :size="'60vw'"
      append-to-body
    >
      <div style="padding: 20px">
        <el-button-group>
          <el-button
            type="primary"
            size="mini"
            @click.native="getAdd()"
            icon="el-icon-circle-plus-outline"
          >
            添 加</el-button
          >
          <el-button
            @click.native="delItem()"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >批 量 删 除</el-button
          >
        </el-button-group>
        <el-table
          v-loading="loading"
          :data="list"
          @selection-change="handleSelectionChange"
          :max-height="maxHeight"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column align="center" label="ID" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <template v-for="(i, index) in tableForm.item">
            <el-table-column
              :key="index"
              :prop="i.itemcode"
              :columnKey="i.itemcode"
              :label="i.itemname"
              :align="i.aligntype ? i.aligntype : 'center'"
              :width="!!i.width ? i.width : ''"
              :min-width="i.minwidth"
              :show-overflow-tooltip="i.overflow ? true : false"
              :sortable="i.sortable ? true : false"
              v-if="i.displaymark ? true : false"
            >
              <template slot-scope="scope">
                <div v-if="i.itemcode == 'isLimit'">
                  <span v-if="scope.row[i.itemcode] == 1">是</span>
                  <span v-if="scope.row[i.itemcode] == 2">否</span>
                </div>
                <div v-else-if="i.itemcode == 'limitnum'">
                  <span v-if="scope.row.isLimit == 2">-</span>
                  <span v-else>{{ scope.row[i.itemcode] }}</span>
                </div>
                <span v-else>{{ scope.row[i.itemcode] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </el-drawer>

    <el-dialog
      :close-on-click-modal="false"
      :title="'添加经销商'"
      :visible.sync="customerShow"
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="customerForm"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="经销商" prop="clientName">
              <el-select
                style="width: 100%"
                v-model="form.clientId"
                filterable
                placeholder="请选择经销商"
                remote
                reserve-keyword
                :remote-method="getListClient"
                @change="handleClientChange"
              >
                <el-option
                  v-for="item in clientList"
                  :key="item.clientId"
                  :label="item.clientName"
                  :value="item.clientId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="经销商编码" prop="clientCode">
              <el-input
                v-model="customerForm.clientCode"
                placeholder="请输入经销商编码"
                readonly
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否限购" prop="isLimit">
              <el-switch
                v-model="customerForm.isLimit"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="customerForm.isLimit == 1">
            <el-form-item label="限购量" prop="limitnum">
              <el-input-number
                v-model="customerForm.limitnum"
                controls-position="right"
                :min="0"
                size="small"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCustomerForm">确 定</el-button>
        <el-button @click="customerShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getActivityListItem,
  addCustomerList,
  delCustomerList,
} from "@/api/app/activity";
import { tableCustomerList } from "./tablecolums.js";
import { listClient } from "@/api/mes/md/client";
import commonMix from "@/utils/mixins/common";
export default {
  components: {},
  mixins: [commonMix],
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      form: {},
      list: [],
      tableForm: tableCustomerList,
      selRows: [],
      customerShow: false,
      customerForm: {
        activityId: "",
        clientId: "",
        clientCode: "",
        clientName: "",
        isLimit: 2,
        limitnum: 0,
        buynum: 0,
      },
      rules: {},
      clientList: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  watch: {
    list: function (val, oldVal) {
      if (val == undefined) {
        this.list = [];
      }
      for (var i = 0; i < val.length; i++) {
        val[i].rownum = i;
      }
    },
  },
  async mounted() {
    this.handleUpdate();
    this.getListClient();
  },
  methods: {
    /** 获取详情 */
    handleUpdate() {
      console.log(this.data);
      getActivityListItem(this.data.activityId).then((res) => {
        this.form = Object.assign({}, res.data);
        this.list = res.data.customerList || [];
        this.loading = false;
      });
    },
    handleSelectionChange(selection) {
      this.selRows = selection;
    },
    /** 提交按钮 */
    submitCustomerForm() {
      // this.list.push(this.customerForm);
      console.log("提交", this.form);
      addCustomerList(this.customerForm).then((res) => {
        console.log(res);
        this.$modal.msgSuccess("新增成功");
        this.handleUpdate();
        this.customerShow = false;
      });
    },
    getAdd() {
      this.customerForm = {
        activityId: this.data.activityId,
        clientId: "",
        clientCode: "",
        clientName: "",
        isLimit: 2,
        limitnum: 0,
        buynum: 0,
      };
      this.customerShow = true;
    },
    // 删除行
    delItem() {
      var that = this;
      this.$confirm("是否确认删除，此操作不可逆, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除的方法
          var ids = [];
          for (var i = 0; i < that.selRows.length; i++) {
            var item = that.selRows[i];
            ids.push(item.id);
          }
          delCustomerList(ids).then((res) => {
            console.log(res);
            this.$modal.msgSuccess("操作成功");
            this.handleUpdate();
          });
          // for (var i = 0; i < that.selRows.length; i++) {
          //   var indexI = that.selRows[i];
          //   fn: for (var j = 0; j < that.list.length; j++) {
          //     var indexJ = that.list[j];
          //     if (indexI.rownum == indexJ.rownum) {
          //       // 判断item是否为id
          //       if (!!indexJ.productId) {
          //         deletOrderItem(indexJ.productId);
          //       }
          //       that.list.splice(j, 1);
          //     }
          //   }
          // }
        })
        .catch(() => {});
    },
    // 查询客户信息
    getListClient(clientName = "") {
      listClient({
        pageNum: 1,
        pageSize: 100,
        enableFlag: "Y",
        clientName,
      }).then(({ rows }) => {
        this.clientList = rows;
      });
    },
    // 修改客户
    handleClientChange(val) {
      console.log(val);
      var index = this.clientList.findIndex((a) => a.clientId == val);
      if (index != -1) {
        var item = this.clientList[index];
        this.customerForm.clientName = item.clientName;
        this.customerForm.clientId = item.clientId;
        this.customerForm.clientCode = item.clientCode;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
